/**
 * @fileOverview
 */

Karamu = Karamu || {};
Karamu.Controllers = Karamu.Controllers || {};

/**
 * @class
 * @requires jQuery, underscore.js, karamu.js
 * @param {Object} context the top-level controller object, e.g karamu
 */
Karamu.Controllers.Preview = function(context){
    this.context = context;

    /**
     * @param {(Object|string)} element a jQuery object or jQuery selector for a single object to render into
     * @param {Object} options
     * @param {string} options.width e.g. 'span4'
     * @param {string} options.data a plain object
     * @public
     */
    this.render = function(element, options) {
        this.element = this.context.tmpl('gadget-preview', {
            width: options.width,
            gadget: options.data
        });

        // Store all data properties, as they may be needed for drag & drop operations
        _.each(options.data, function(value, key){
            this.element.data(key, value);
        }, this);

        // Add drag-drop handlers to gadget previews
        if (Modernizr.draganddrop) {
            $(this.element).attr('draggable', true).on({
                dragstart: this.dragstart,
                dragend: this.dragend
            }, this);
            // enable drag-n-drop in IE
            if ($(this.element)[0].dragDrop) {
                $(this.element).on({
                    mousemove: this.mousemove
                }, this);
            }
            $('.btn-primary', this.element).hide();
        } else {
            $('.btn-primary', this.element).on({
                click: this.click
            }, this);
        }

        // Add the gadget to the correct pane
        element.append(this.element);
    }

    /**
     * @param {?Object} e event object
     * @public
     */
    this.mousemove = function(e) {
        var target = e.target;
        if (window.event.button === 1) {
            target.dragDrop();
        }
    };

    /**
     * @param {?Object} e event object
     * @public
     */
    this.dragstart = function(e) {
        $(e.data.context.controllers.catalog.options.dropzoneSelector).addClass('glow');
        $(e.currentTarget).css('opacity', 0.5);
        $(e.currentTarget).addClass('dragstart');
        e.originalEvent.dataTransfer.effectAllowed = 'copy';
        e.originalEvent.dataTransfer.setData('URL', $(e.currentTarget).data('url'));
        e.originalEvent.dataTransfer.setData('Text', JSON.stringify($(e.currentTarget).data()));
    };

    /**
     * @param {?Object} e event object
     * @public
     */
    this.dragend = function(e) {
        $(e.data.context.controllers.catalog.options.dropzoneSelector).removeClass('glow');
        $(e.currentTarget).css('opacity', 1);
        $(e.currentTarget).removeClass('dragstart');
    };

    /**
     * @param {?Object} e event object
     * @public
     */
    this.click = function(e) {
        e.preventDefault();
        var gadget = $.extend(true, {}, e.data.context.models[e.data.context.view]._gadget, $($(e.currentTarget).parents(e.data.context.controllers.catalog.options.gadgetSelector)[0]).data()),
            targetGroupId = $($(e.data.context.controllers.catalog.options.dropzoneSelector)[0]).attr('id').substr('group-'.length);
        switch (e.data.context.view) {
            case 'desktop'  : $(e.data.context.models[e.data.context.view]).trigger('add-shortcut', [gadget, targetGroupId]); break;
            case 'dashboard': $(e.data.context.models[e.data.context.view]).trigger('add-gadget'  , [gadget, targetGroupId]); break;
        }
    };

};